<script setup lang="ts">
import { ref, reactive } from 'vue'

// 定义录入项接口
interface EntryItem {
  id: number
  name: string
  value: string
  showForm: boolean
}

// 当前激活的标签页
const activeTab = ref('manual')

// 搜索关键词
const searchKeyword = ref('')

// 录入项列表数据
const entryItems = reactive<EntryItem[]>([
  { id: 1, name: '血压', value: '', showForm: false },
  { id: 2, name: '血糖', value: '', showForm: false },
  { id: 3, name: '体温', value: '', showForm: false },
  { id: 4, name: '心率', value: '', showForm: false },
  { id: 5, name: '体重', value: '', showForm: false }
])

// 切换表单显示状态
const toggleForm = (item: EntryItem) => {
  item.showForm = !item.showForm
}

// 筛选功能
const filterItems = () => {
  // 实际项目中可以根据搜索关键词筛选entryItems
  console.log('筛选关键词:', searchKeyword.value)
}

// 拍照识别功能
const handlePhotoRecognition = (item: EntryItem) => {
  console.log('拍照识别:', item.name)
  // 这里可以调用相机API或上传图片API
}

// 表单提交
const handleSubmit = (item: EntryItem) => {
  console.log('提交数据:', item)
  // 提交后可以清空或隐藏表单
  item.showForm = false
}

import ManualEntry from './components/ManualEntry/index.vue'
import IntelligentCollection from './components/IntelligentCollection.vue'
import ReportManagement from './components/ReportManagement.vue'

</script>

<template>
  <div class="archive-management">
    <!-- 标签页导航 -->
    <el-tabs v-model="activeTab" class="entry-tabs">
      <el-tab-pane label="手动录入" name="manual"></el-tab-pane>
      <el-tab-pane label="智能采集" name="intelligent"></el-tab-pane>
      <el-tab-pane label="报告管理" name="report"></el-tab-pane>
    </el-tabs>

    <!-- 手动录入内容 -->
    <div v-if="activeTab === 'manual'" class="entry-content">
      <ManualEntry />
    </div>

    <!-- 智能采集内容 -->
    <div v-else-if="activeTab === 'intelligent'" class="entry-content">
      <IntelligentCollection />
    </div>

    <!-- 报告管理内容 -->
    <div v-else-if="activeTab === 'report'" class="entry-content">
      <ReportManagement />
    </div>
  </div>
</template>

<style scoped lang="scss">
.archive-management {
  width: 100%;
  padding: 20px;
  max-width: 100%;
}

.entry-tabs {
  background-color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;

  :deep(.el-tabs__header) {
    margin: 0;
  }

  :deep(.el-tabs__nav-wrap::after) {
    display: none;
  }

  :deep(.el-tabs__item) {
    font-size: 16px;
    padding: 0 20px;
    height: 40px;
    line-height: 40px;

    &.is-active {
      color: var(--el-color-primary);
      font-weight: 500;
    }

    &:hover {
      color: var(--el-color-primary);
    }
  }
}

.entry-content {
  background-color: #fff;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-filter {
  display: flex;
  gap: 10px;
}

.search-input {
  width: 300px;
}

.entry-list {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.05);
}

.entry-item {
  padding: 20px;
  border-bottom: 1px solid #e4e7ed;
  transition: background-color 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;

  &:hover {
    background-color: #f9fafc;
  }
}

.entry-item:last-child {
  border-bottom: none;
}

.item-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  width: 100%;
}

.item-form {
  margin-top: 15px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 8px;
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.05);
  border: 1px solid #ebeef5;
  width: 80%;
  max-width: 500px;
}

.placeholder {
  padding: 40px 0;
  text-align: center;
}
</style>
